<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="false">
			<block slot="backText"></block>
			<block slot="content">{{dataDetail.Title}}</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow">

				<!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" 1-->
				<view class="cu-list menu">

					<!-- <view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="text-black">名称:</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{dataDetail.Title}}</view>
						</view>
					</view> -->
					
					
					
					
					<view class="cu-item" style="padding: 0; border-top: 1rpx solid #eee;border: none !important;">
						<view class="bxBox" style="">
							<view class="title text-black"></view>
						</view>
						<view class='padding-bottom-sm padding-left-sm bg-white'>
							<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
								<rich-text :nodes="dataDetail.Content"></rich-text>
							</view>
						</view>
					</view>


					
					<view  v-if="dataDetail.LabelArrys.length>0" class="bxBox">
						<view class="title text-black">标签：</view>
					</view>
					<view v-if="dataDetail.LabelArrys.length>0" class='cu-capsule radius margin-right;border: none !important;'>
						<view v-for="(item,index) in dataDetail.LabelArrys" >
							<view>
								<view class="cu-capsule radius margin-right">
									<view class='cu-tag bg-green'>
										<text class="cuIcon-check text-lg"></text>
									</view>
									<view class="cu-tag line-green">
										{{item}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;border: none !important;">
						<view class="content">
							<text class="text-black">维护时间:</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{dataDetail.AddTime}}</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 图片信息 -->
			<view class="center-box shadow">
				<view class="cu-list menu" style="border: none !important;">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title" >
							<text class="text-xl text-bold text-blue text-shadow"  style="border: none !important;">图片介绍</text>
							<text class="text-ABC text-blue">Pictures</text>
						</view>
					</view>
					<view v-if="dataDetail.IntroductionImageArrys.length < 1" class="padding text-grey">暂无数据</view>
					<view v-if="dataDetail.IntroductionImageArrys.length > 0">
					     <view v-for="(item,index) in dataDetail.IntroductionImageArrys">
							 <view class="cu-item imagesclass" style="padding: 0;">
							 	<view class="content">
							 		<image @click="goPreviewImage(dataDetail.IntroductionImageArrys,'')"  :src="dataDetail.IntroductionImageArrys[index]" class="png cu-avatar round sm imagesclassdetail" mode="aspectFit"></image>
							 	</view>
							 </view>
						 </view>
					</view>
				</view>
			</view>

			<view class="center-box shadow">
				<view class="cu-list menu" style="border: none !important;">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">资料文档</text>
							<text class="text-ABC text-blue">Files</text>
						</view>
					</view>
					<view v-if="dataDetail.FilesArrys.length < 1" class="padding text-center text-grey">暂无数据</view>
					<view  v-for="(item,index) in dataDetail.FilesArrys">
						<view class="cu-item" style="padding: 0;">
							<view class="content" style="float: left;width: 80%;overflow: hidden;height: 40px;line-height: 40px;">
								<text class="text-lg">{{item.split('/')[item.split('/').length-1]}}</text>
							</view>
							<view class="action"  style="float: left;width: 20%;height: 40px;line-height: 40px;">
								<button @click="openDocument(item)" class="cu-btn round sm shadow bg-green margin-left">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加入按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 40px;">
				<button @click="goHandle(dataDetail.ButtonName,dataDetail.Id)" class="cu-btn bg-blue margin-top-sm lg" style="width: 98%;">{{dataDetail.ButtonName}}</button>
				<button @click="goHome()" class="cu-btn bg-green margin-top-sm lg" style="width:98%;margin-left: 10rpx;">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
	export default {
		data() {
			return {
				dataDetail:{
					Id:0,
					Title:'点位详情',
					Content:'',
					SubTitle:'',
					Company:'',
					AddTime:'',
					IntroductionImage:'',
					IntroductionImageArrys:[],
					Label:'',
					LabelArrys:'',
					Files:'',
					FilesArrys:[],
					ButtonName:'去维保'
				},
				params:{
					qrcode_id:''
				}
			}
		},
		onShow() {
			console.log('onShow')
			
		},
		onLoad(options) {
			console.log(options)
			let that=this
			if (JSON.stringify(options.q)!="{}") {
				// 扫码后接收到的参数
				var url = decodeURIComponent(options.q)
				console.log("url:"+url)
				let qrcodeid=url.split('=')[1];
				console.log("qrcodeid:"+qrcodeid)
				//var scanParamsQrcode = this.getQueryParams(url)
				that.getQrcodeInformationDetail(qrcodeid)
			}
		},
		methods: {
			getQueryParams:function (queryString) {
			    var urlArray = url.split('?')
			        
				var url_params = '?'+urlArray[1]
				// console.log(url_params)
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url_params.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			openDocument(url){
				console.log(this.$request22.baseUrl1+url)
				uni.downloadFile({
					url: this.$request22.baseUrl1+url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
							}
						});
					}
				})
			},
			getQrcodeInformationDetail(id){
				uni.showLoading({
					title: '加载中'
				})
				var that = this;
				let opts = {
					url: 'api/GetQrcodeInformation',
					method: 'get'
				};
				that.params.qrcode_id=id;
				request.httpRequest(opts,that.params).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.dataDetail=res.data.data;
						that.dataDetail.baseUrl=that.$request22.baseUrl1
						console.log(that.dataDetail)
						uni.hideLoading();
					}
					else{
						if(res.data.code ==306){
							setTimeout(() => {
								 uni.reLaunch({
								 	url: '/pages/qrcode/login?id='+id
								 });
							}, 0)
						}else{
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					}
				});
			},
			goPreviewImage(url,baseurl){
				let urls=[]
				for(let i=0;i<url.length;i++){
					urls.push(baseurl+url[i])
				}
				uni.previewImage({
					current:0,
					urls:urls
				});
			},
			goHandle(buttonName,id){
				//dataDetail.ButtonName
				//去巡检 ==去登录
				//立即学习 == 暂定
				//去签到 == 授权页面
				let that=this
				if(buttonName=='去巡检'){
					setTimeout(() => {
						 uni.reLaunch({
						 	url: '/pages/qrcode/login?id='+id
						 });
					}, 0)
				}else if(buttonName=='立即学习'){
					uni.showToast({ title: '敬请期待', icon: '/static/success.png' });
				}else{
					uni.showToast({ title: '敬请期待', icon: '/static/success.png' });
				}
			},
			goHome(){
				setTimeout(() => {
					 uni.reLaunch({
						url: '/pages/index/tabbar?PageCur=search'
					 });
				}, 0)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
</style>